{% extends 'layout/indexframe.html' %}

{% block title %}index{% endblock %}

{% block css %}
    <style>
        #banner {
            width: 90%;
            height: 80%;
            margin-left: 20px;
            margin-top: 30px;
            position: relative; /*相对定位,相对于.btn按钮*/
            text-align: left;
        }

        .pic img {
            display: block; /*默认有图片不显示*/
            width: 100%;
            height: 100%;
            position: relative; /*相对定位.对应的是.pic这个div*/
            top: 0px;
            left: 0px;
        }

        .pic a {
            display: none;

        }

        .pic { /*专门显现图片区*/
            position: relative; /*相对定位.对应.pic img*/
            border: 1px solid red;
        }

        .btn1 {
            width: 65%;
            height: 10%;
            position: absolute; /*绝对定位相对于banner div*/
            bottom: 5px;
            right: 5px;
        }

        .btn1 ul li {
            background-color: #000000;
            color: #ffffff;
            list-style-type: none;
            width: 30px;
            height: 30px;
            float: left;
            border-radius: 30px;
            text-align: center;
            line-height: 28px;
            cursor: pointer;
            margin-left: 5px;
        }

        .btn1 ul li.one {
            background-color: #ff9966;
        }
    </style>

{% endblock %}

{% block content %}
    <div class="wrapper wrapper-content animated fadeInRight" style="height: 3000px;">
        <div class="col-md-8">
            <div id="banner" class="row">
                <div class="pic">
                    <a href="#" style="display:block"><img alt="" src="/web/static/img/show1.jpg"/></a>
                    <a href="#"><img alt="" src="/web/static/img/show2.jpg"/></a>
                    <a href="#"><img alt="" src="/web/static/img/show3.jpg"/></a>
                    <a href="#"><img alt="" src="/web/static/img/show4.jpg"/></a>
                    <a href="#"><img alt="" src="/web/static/img/show5.jpg"/></a>
                    <a href="#"><img alt="" src="/web/static/img/show6.jpg"/></a>
                </div>
                <div class="btn1">
                    <ul>
                        <li class="one">1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                        <li>6</li>
                    </ul>
                </div>
            </div>
        </div>


        <div class="col-md-4">
            <div class="col-md-7" style="margin-top: 20px;margin-left: -50px;">
                <div>
                    <a href="/web/device/man" title="当前用户总设备数为:{{ devall }}　点击查看详情">
                        <div class="widget style1 navy-bg">
                            <div class="row vertical-align">
                                <div style="margin-left: 70px">
                                    <h2 class="font-bold" style="margin-left: -10px;">总主题数</h2>
                                </div>
                                <div>
                                    <div class="col-md-3" style="margin-top: 25px;">
                                        <i class="fa fa-desktop fa-3x"></i>
                                    </div>
                                    <div class="col-md-9 text-right">
                                        <strong style="font-size: 60px; margin-left: 20px;">{{ devall }}</strong>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div>
                    <a href="/web/device/man" title="已订阅设备数为:{{ devsub }}　点击进行操作">
                        <div class="widget style1 navy-bg">
                            <div class="row vertical-align">
                                <div style="margin-left: 30px">
                                    <h2 class="font-bold" style="margin-left: 10px;font-size: 25px;">当前订阅主题数</h2>
                                </div>
                                <div>
                                    <div class="col-md-3" style="margin-top: 25px;">
                                        <i class="fa fa-rss fa-3x"></i>
                                    </div>
                                    <div class="col-md-9 text-right">
                                        <strong style="font-size: 60px;margin-left: 35px;">{{ devsub }}</strong>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div>
                    <a href="/web/device/man" title="可以发布设备数为:{{ devpub }}　点击制定计划">
                        <div class="widget style1 navy-bg">
                            <div class="row vertical-align">
                                <div style="margin-left: 30px">
                                    <h2 class="font-bold" style="margin-left: 15px;font-size: 25px;">可发布主题数</h2>
                                </div>
                                <div>
                                    <div class="col-md-3" style="margin-top: 25px;">
                                        <i class="fa fa-rss fa-3x"></i>
                                    </div>
                                    <div class="col-md-9 text-right">
                                        <strong style="font-size: 60px;margin-left: 35px;">{{ devpub }}</strong>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>

            </div>

            <div class=" col-md-5" style="margin-top: 30px;">
                <a href="/web/trigger" title="触发事件次数为:{{ triggercount }}　点击进入触发事件页面">
                    <div class="widget red-bg p-lg text-center">
                        <div class="m-b-md">
                            <i class="fa fa-bell fa-4x"></i>
                            <strong style="font-size: 60px">{{ triggercount }}</strong>
                            <h2 class="font-bold no-margins" style="font-size: 25px;margin-top: -10px">
                                事件触发
                            </h2>

                        </div>
                    </div>
                </a>
            </div>
        </div>

    </div>





{% endblock %}

{% block js %}
    <script>
        $(document).ready(function () {
            {#显示当前页面的标签#}
            $('#devindex').addClass('active')

            setTimeout(function () {
                toastr.options = {
                    closeButton: true,
                    progressBar: true,
                    showMethod: 'slideDown',
                    timeOut: 1000
                };
                toastr.success('欢迎来到物联网云系统', 'Welcome to Iot System');

            }, 1000);
        });
    </script>
    <script>
        $(function () {
            $("#all li").mouseover(function () {//鼠标进入离开事件
                $(this).css("background-color", "#ff00ff").siblings().css("background-color", "white");
                $(this).css({"background-color": "red", "font-size": "9px"}).siblings().hide();
            });
            $(window).scroll(function () {//鼠标滚动事件
                var _top = $(window).scrollTop(); //获得鼠标滚动的距离
            });
            //手动播放图片
            $(".btn1 ul li").hover(function () {
                $(this).addClass("one").siblings().removeClass("one");
                index = $(this).index();
                i = index;
                $(".pic a").eq(index).stop().fadeIn(500).show().siblings().stop().fadeIn(500).hide();
            });
            //自动播放图片
            var i = 0;
            var t = setInterval(autoplay, 9000);

            function autoplay() {
                i++;
                if (i > 5) i = 0;
                $(".btn1 ul li").eq(i).addClass("one").siblings().removeClass("one");
                $(".pic a").eq(i).stop().fadeIn(500).show().siblings().stop().fadeIn(500).hide();
            }

            $("#banner").hover(function () {
                clearInterval(t);
            }, function () {
                t = setInterval(autoplay, 9000);
            });
        });


    </script>

{% endblock %}